<template>
  <q-page class="row justify-center box">
    <div class="txt">行车定位系统</div>
    <img class="bg1" src="~/assets/login/login_bg.png" alt="" />
    <div class="flex column items-center bg2">
      <q-select
        outlined
        v-model="craneNo"
        :options="craneIds"
        label="行车号"
        color="grey-5"
        dark
        :style="{ position: 'absolute', width: '400px', top: '120px' }"
      />
      <span class="btn" @click="handleLogin"></span>
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useYardStore } from 'src/stores/yard';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'wms-login',

  setup() {
    const craneNo = ref('');
    const yard = useYardStore();
    const { craneIds } = storeToRefs(yard);
    const router = useRouter();

    const handleLogin = () => {
      if (craneNo.value) {
        localStorage.setItem('craneNo', craneNo.value);
        router.push('/');
      } else {
        alert('请选择行车号');
      }
    };

    return { craneNo, craneIds, handleLogin };
  },
});
</script>

<style lang="scss" scoped>
.box {
  height: 100vh;
  background-color: #000;
  .txt {
    position: fixed;
    color: #fff;
    left: 361px;
    top: 481px;
    font-size: 96px;
    z-index: 3;
    font-family: semiBold;
  }
  .bg1 {
    position: fixed;
    width: 640.31px;
    height: 612.16px;
    top: 255px;
    left: 754px;
  }
  .bg2 {
    position: fixed;
    width: 480px;
    height: 304px;
    top: 388px;
    left: 1245px;
    background-image: url(src/assets/login/bg.png);
    background-size: cover;
    .btn {
      position: absolute;
      width: 400px;
      height: 56px;
      top: 200px;
      background-image: url(src/assets/login/login_bt.png);
      background-size: cover;
      cursor: pointer;
    }
  }
}
</style>
